<script setup lang="ts">
import { ref } from 'vue';
import { v4 as uuid } from 'uuid';
import { GGanttChart, GGanttRow, GanttBarObject } from '@infectoone/vue-ganttastic';
import * as d3 from 'd3';

const timeFormat = d3.timeFormat('%Y-%m-%d');
const timeParse = d3.timeParse('%Y-%m-%d');

const row1BarList = ref<GanttBarObject[]>([
  {
    start_date: '2023-10-04',
    end_date: '2023-10-12',
    ganttBarConfig: {
      // each bar must have a nested ganttBarConfig object ...
      id: uuid(), // ... and a unique "id" property
      label: '植物大战僵尸',
    },
  },
  {
    start_date: '2023-10-13',
    end_date: '2023-11-13',
    ganttBarConfig: {
      // each bar must have a nested ganttBarConfig object ...
      id: uuid(), // ... and a unique "id" property
      label: '空洞骑士',
    },
  },
]);
const row2BarList = ref<GanttBarObject[]>([
  {
    start_date: '2023-12-13',
    end_date: '2023-12-23',
    ganttBarConfig: {
      id: uuid(),
      hasHandles: true,
      label: 'Hey, look at me',
      style: {
        // arbitrary CSS styling for your bar
        background: '#e09b69',
        borderRadius: '20px',
        color: 'black',
      },
      // class: "foo", // you can also add CSS classes to your bars!
    },
  },
  {
    start_date: '2023-12-24',
    end_date: '2024-01-05',
    ganttBarConfig: {
      id: uuid(),
      hasHandles: true,
      label: 'Hey, look at me',
      style: {
        // arbitrary CSS styling for your bar
        background: '#e09b69',
        borderRadius: '20px',
        color: 'black',
      },
    },
  },
]);

const widht = '10000px';
</script>

<script lang="ts">
export default {
  name: 'GanttTestView',
};
</script>

<template>
  <h1>GanttTestView</h1>
  <section class="overflow-x-auto">
    <div class="wrapper px-4">
      <g-gantt-chart
        chart-start="2023-10-01"
        chart-end="2024-05-30"
        precision="month"
        bar-start="start_date"
        bar-end="end_date"
        date-format="YYYY-MM-DD"
        :push-on-overlap="true"
        grid
        :highlighted-units="[10]"
      >
        <!-- <template #upper-timeunit="{ label, value, date }">
          <div style="width: 10000px">{{ label }}</div>
        </template> -->
        <!-- <template #timeunit="{ label, value }">
          <div class="w-[40px] flex-shrink-0">{{ label }}</div>
        </template> -->
        <g-gantt-row label="My row 1" :bars="row1BarList" />
        <g-gantt-row label="My row 2" :bars="row2BarList" />
      </g-gantt-chart>
    </div>
  </section>
</template>

<style scoped>
/* PC电脑端 */
@media screen and (width <= 1024px) {
}
</style>
